<template>
  <div class="iphone-button">
    <div
      v-for="(item,index ) in footList"
      :key="'foot-'+index"
      :class="index === active ? 'active': ''"
      class="button-li"
      :style="{width: getLabelWidth}"
      @click="classActive(index,item)"
    >
      <div class="li-icon" :class="item.tb" />
      <div class="li-title">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import { queryAllMenuByLayOutId } from '@/api/mobile/menu';
export default {
  name: 'MobileFooter',
  props: {
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      queryColumn: {
        mid: null
      },
      footList: [],
      active: 0
    };
  },
  computed: {
    getLabelWidth: function() {
      if (this.footList !== null && this.footList.length > 0) {
        return (Math.floor(100) / (this.footList.length)) + '%';
      }
      return '100%';
    }
  },
  watch: {
    layout: {
      handler(newName, old) {
        if (undefined !== newName && newName !== null) {
          this.initLayout(newName.id);
        }
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initLayout(layoutId) {
      queryAllMenuByLayOutId({ lid: layoutId }).then(res => {
        const { data } = res;
        if (data !== null && data.length > 0) {
          this.footList = data;
          // 默认选中 第一个
          this.menu = data[0];
          this.classActive(0, this.menu);
        } else {
          this.footList = [];
        }
      });
    },
    classActive(val, entity) {
      this.active = val;
      this.menu = entity;
      this.$emit('fact-menu', this.menu);
    }
  }
};
</script>

<style scoped>
.iphone-button {
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: 40px;
  border-top: 1px solid #8c939d;
  border-bottom: 1px solid #8c939d;
}

.button-li {
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0px 10px;
  box-sizing: border-box;
  overflow: hidden;
  float: left;
}

.li-icon {
  width: 100%;
  height: 25px;
  line-height: 25px;
  text-align: center;
  float: left;
}

.li-title {
  width: 100%;
  height: 15px;
  line-height: 15px;
  font-size: 12px;
  text-align: center;
}

.active {
  color: #3A71A8;
  border: 1px solid #3A71A8;
}
</style>
